<template>
    <article>
         <h1 class="t_nav"><router-link to="/blog/home" class="n1">网站首页</router-link><router-link to="/blog/articlelist" class="n2">文章列表</router-link></h1>
        <div class="index_about left">
            <h2 class="c_titile">{{articleTitle}}</h2>
            <p class="box_c"><span class="d_time">发布时间：<span>{{createTime}}</span></span><span>作者：<span>{{userName}}</span></span>
            </p>
            <ul class="infos">
                {{articleBody}}
            </ul>
        </div>
        <aside-right></aside-right>
    
    </article>
</template>
<script>
import article_item from './article_item.vue'
import aside_right from './aside_right.vue'
export default {
    components: {
        'article-item': article_item,
        'aside-right': aside_right,
    },
    data() {
        return {
            articleTitle: 'hhhhh',
            articleBody: 'dddddddd',
            userName: 'hhddhdh', 
            createTime: '2013-09-08'
        }
    },
    created() {
        let article=this.$store.state.article;
        console.log(article.createdAt);
        this.userName=article.username;
        this.articleTitle=article.title;
        this.articleBody=article.body;
        this.createTime=article.createAt;
    },
    methods: {
        getUser: function (id) {
            return id
        }
    }
}
</script>
<style lang="scss">
h1.t_nav span {
    float: right;
    color: #999
}

h1.t_nav {
    border-bottom: #F1F1F1 1px solid;
    font-size: 12px;
    font-weight: normal;
    line-height: 40px;
    height: 40px;
}

h1.t_nav a {
    width: 100px;
    display: block;
    text-align: center;
    color: #fff;
    float: left
}

.n1 {
    background: #5EA51B;
}

.n2 {
    background: #8BBF5D;
}

.index_about {
    float: left;
    width: 740px;
    overflow: hidden;
    background: url(./images/r_line.jpg) repeat-y right;
    margin: 10px 0;
    padding: 0 20px;
}

.c_titile {
    font-size: 22px;
    margin: 20px 0;
    text-align: center
}

.box_c {
    border: #ccc 1px dashed;
    text-align: center;
    padding: 5px 0;
    margin-right: 30px;
    color: #999;
}

.box_c span {
    margin: 0 10px;
}

.box_c span a {
    color: #099;
}
</style>